<template>
  <div class="myHeadSys">
    <h3 class="marginBtm title red">请点选左侧正确栏位</h3>
    <a-descriptions
      bordered
      size="small"
      :column="2"
      v-for="item in headListNosave"
      :key="item.vId || item.id"
      :title="titleTemaplate(item, 'lwpz')"
      :style="{ marginBottom: '15px' }"
    >
      <a-descriptions-item label="报表代码">{{ item.bbdm }} </a-descriptions-item>
      <a-descriptions-item label="栏位编码">
        行：{{ item.lwbm.row + 1 }} 列：{{ columnFilter(item.lwbm.column) }}
      </a-descriptions-item>
      <a-descriptions-item label="栏位名称"> {{ item.lwmc }} </a-descriptions-item>
      <a-descriptions-item label="指标数据类型">
        <a-select v-model="item.bzlx" style="width: 150px" @change="saveHead(item)">
          <a-select-option value="1" label="数值">数值</a-select-option>
          <a-select-option value="2" label="字符串">字符串</a-select-option>
        </a-select>
      </a-descriptions-item>
      <a-descriptions-item label="生效日期"> {{ item.startrq }} </a-descriptions-item>
      <a-descriptions-item label="失效日期"> {{ item.endrq }} </a-descriptions-item>
    </a-descriptions>
    <a-descriptions
      bordered
      size="small"
      :column="2"
      v-for="item in headList"
      :key="item.vId || item.id"
      :title="titleTemaplate(item, 'lwpz')"
      :style="{ marginBottom: '15px' }"
    >
      <a-descriptions-item label="报表代码">{{ item.bbdm }} </a-descriptions-item>
      <a-descriptions-item label="栏位编码">
        行：{{ item.lwbm.row + 1 }} 列：{{ columnFilter(item.lwbm.column) }}
      </a-descriptions-item>
      <a-descriptions-item label="栏位名称"> {{ item.lwmc }} </a-descriptions-item>
      <a-descriptions-item label="指标数据类型">
        <a-select v-model="item.bzlx" style="width: 150px" @change="saveHead(item)">
          <a-select-option value="1" label="数值">数值</a-select-option>
          <a-select-option value="2" label="字符串">字符串</a-select-option>
        </a-select>
      </a-descriptions-item>
      <a-descriptions-item label="生效日期"> {{ item.startrq }} </a-descriptions-item>
      <a-descriptions-item label="失效日期"> {{ item.endrq }} </a-descriptions-item>
    </a-descriptions>
  </div>
</template>

<script>
import { columnFilter } from '../export.js'
import TitleTemplate from './TitleTemplate.vue'

export default {
  name: 'LwSys',
  components:{TitleTemplate},
  props: {
    headListNosave: {
      type: Array,
      required: false,
    },
    headList: {
      type: Array,
      required: false,
    },
    deleteHeadList: {
      type: Function,
      required: false,
    },
  },
  data() {
    return {
      columnFilter,
    }
  },
  methods: {
    // 动态header回调删除
    titleTemaplate(data, type) {
      return <title-template data={data} type={type} deleteHeadList={this.deleteHeadList}></title-template>
    },
    // 保存栏位配置
    saveHead(record) {
      this.$emit('saveHead', record)
    },
  },
}
</script>
<style lang="less" scoped>
.mySysBox {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.myHeadSys {
  flex: auto;
  min-height: 200px;
  overflow-y: auto;
  &.myHeadSysHeight {
    min-height: auto;
  }
}
.myHeadSysList {
  padding: 8px 8px;
  border-radius: 2px;
  .ant-descriptions {
    box-shadow: 0 0 8px #0000002e;
    border-radius: 2px;
  }
}
.marginLeft {
  margin-left: 15px;
}
.red{
  color: red;
}
</style>